/*
  学习目标：使用ref获取dom元素或组件实例对象
  步骤：
     3. 通过ref对象.current访问绑定的元素
*/

import React, { Component } from 'react';

// 1. 通过createRef函数创建ref对象
export default class App extends Component {
  iptRef = React.createRef();

  handleClick = () => {
    this.iptRef.current.focus();
  };

  childRef = React.createRef();

  render() {
    return (
      <div>
        {/* 2. 绑定ref给dom */}
        <input ref={this.iptRef} type="text" />
        <button onClick={this.handleClick}>点我激活input</button>

        <Child ref={this.childRef}></Child>
        <button
          onClick={() => {
            this.childRef.current.handleAlert();
          }}
        >
          点我alert
        </button>
      </div>
    );
  }
}

class Child extends React.Component {
  handleAlert = () => {
    alert('我是子组件, 我被触发了');
  };
  render() {
    return <div>Child</div>;
  }
}
